<template>
  <div class="correct-container">
    <Breadcrumb>
      <template #bread-name>
        {{ studentList[curStudentIndex]?.student_name }}
      </template>
    </Breadcrumb>
    <main class="content flex">
      <div class="content-left">
        <div class="flex-between">
          <div class="left-title text-ellipsis" :title="taskInfo.name">
            {{ taskInfo.name }}
          </div>
          <el-select
            v-model="selectClass"
            placeholder="请选择班级"
            value-key="classId"
            style="width: 120px"
          >
            <el-option
              v-for="item in taskInfo.classList"
              :key="item.classId"
              :label="item.className"
              :value="item"
            />
          </el-select>
        </div>
        <div class="student-info flex-column">
          <img src="@/assets/images/common/girl.png" class="avatar-img" />
          <span class="name">{{
            studentList[curStudentIndex]?.student_name
          }}</span>
        </div>
        <div class="task-list flex-column">
          <el-empty v-if="!taskList.length" description="暂无题目"></el-empty>
          <div
            class="task-item flex-between"
            v-for="(task, index) in taskList"
            :key="index"
          >
            <span>
              <!-- teacher_correct -1待批改 -->
              {{ index + 1 }}、{{ questionTypeMap[task.question_detail.type] }}
            </span>

            <el-tag v-if="task.submit === 0" class="correct-btn" type="info"
              >未提交</el-tag
            >
            <el-tag
              v-else-if="task.teacher_correct === -1"
              class="correct-btn"
              type="info"
              >待批改</el-tag
            >
            <el-tag v-else class="correct-btn" type="success">已批改</el-tag>
          </div>
        </div>
        <div class="btn-list flex-around">
          <div
            class="btn-item hover flex-center"
            :class="[curStudentIndex <= 0 && 'disabled']"
            @click="onChangeStu('pre')"
          >
            上一个学生
          </div>
          <div
            class="btn-item hover flex-center"
            :class="[curStudentIndex >= studentList.length - 1 && 'disabled']"
            @click="onChangeStu('after')"
          >
            下一个学生
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="task-line flex-between">
          <div class="line-left flex">
            <div class="left-item">
              学生已批改正确率：<span class="text"
                >{{ studentTaskInfo.grade_rate }}%</span
              >
            </div>
            <div class="border"></div>
            <div class="left-item">
              平均完成时间：<span class="text">
                {{
                  studentTaskInfo.all_time < 60
                    ? studentTaskInfo.all_time + '秒'
                    : (studentTaskInfo.all_time / 60).toFixed(0) +
                      '分钟' +
                      (studentTaskInfo.all_time % 60) +
                      '秒'
                }}
              </span>
            </div>
          </div>
          <el-button
            type="primary"
            round
            @click="toCorrectDetail"
            v-if="isCorrect"
            >批改作业</el-button
          >
        </div>
        <!-- 题目列表 -->
        <div class="question-list">
          <template v-for="(question, index) in taskList" :key="index">
            <div class="question-info">
              {{ index + 1 }}
              <Topic :topic-data="question.question_detail" />
            </div>
            <div class="question-stu flex-between">
              <div class="stu-left">
                <div class="title">学生答题</div>
                <div
                  v-if="question.response"
                  v-html="
                    getNormalizeData(
                      JSON.parse(question.response),
                      getParseData(question.question_detail)
                    )
                  "
                ></div>
                <template
                  v-if="
                    question.sub_topic_info && question.sub_topic_info.length
                  "
                >
                  <div
                    v-for="(subResponse, subIndex) in question.sub_topic_info"
                    :key="subIndex"
                    v-html="
                      getNormalizeData(
                        JSON.parse(subResponse.response || JSON.stringify([])),
                        getParseData(
                          question.question_detail.subproblem[subIndex]
                        )
                      )
                    "
                  ></div>
                </template>
              </div>
              <div class="stu-btn hover flex-column">
                <img
                  class="btn-img"
                  src="@/assets/images/assignment/edit-1.png"
                />

                <span v-if="question.submit === 0">未提交</span>
                <span v-else-if="question.teacher_correct === -1">待批改</span>
                <span v-else>已批改</span>
              </div>
            </div>
            <div class="question-an">
              <div class="title">题目答案</div>
              <div
                v-if="!question.question_detail.subproblem"
                v-html="
                  handleAnswer(
                    getQuestion(question.question_detail).answer,
                    getParseData(question.question_detail)
                  )
                "
              ></div>
              <template
                v-if="
                  question.question_detail.subproblem &&
                  question.question_detail.subproblem.length
                "
              >
                <div
                  v-for="(subproblem, subIndex) in question.question_detail
                    .subproblem"
                  :key="subIndex"
                  v-html="
                    handleAnswer(
                      getQuestion(subproblem).answer,
                      getParseData(subproblem)
                    )
                  "
                ></div>
              </template>
            </div>
          </template>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import { getPracticeDetail, getQuestionByTaskId } from '@/apis/assignment'
import Topic from '@/components/rb-topic/Topic.vue'
import {
  getNormalizeData,
  handleAnswer,
  getParseData,
  rbqOption
} from '@/utils/answer'
import QuestionParser from '@ebag/rb-question-parser'
import { questionTypeMap } from '@/constants'

const route = useRoute()
const taskInfo = ref({
  taskId: '',
  name: '',
  classList: []
})
const selectClass = ref()
const taskList = ref([])
const studentTaskInfo = ref({
  all_time: 0,
  grade_rate: 0
})
const studentList = ref([])
const curStudentIndex = ref(null)

const onChangeStu = type => {
  if (!studentList.value.length) return
  if (type === 'pre') {
    curStudentIndex.value =
      curStudentIndex.value === 0 ? 0 : curStudentIndex.value - 1
  } else {
    curStudentIndex.value =
      curStudentIndex.value === studentList.value.length - 1
        ? curStudentIndex.value
        : curStudentIndex.value + 1
  }
}

/**
 * 去批改作业详情
 */
const toCorrectDetail = () => {
  router.push({
    name: 'detailCorrect',
    query: {
      taskId: taskInfo.value.taskId,
      name: taskInfo.value.name,
      activeClassId: selectClass.value.value,
      classList: JSON.stringify(taskInfo.value.classList)
    }
  })
}

/**
 * 查看任务下的题目
 */
const getQuestionListInfo = async () => {
  if (curStudentIndex.value === null) return
  let param = {
    task_id: taskInfo.value.taskId,
    student_id: studentList.value[curStudentIndex.value].student_id,
    class_id: selectClass.value.classId,
    class_type: selectClass.value.class_type
  }
  const res = await getQuestionByTaskId(param)
  taskList.value = res.data.question_info || []
  studentTaskInfo.value = {
    all_time: res.data.task_info.all_time,
    grade_rate: (res.data.task_info.grade_rate * 100).toFixed(0)
  }
}

const isCorrect = computed(() => {
  return (
    studentList.value[curStudentIndex.value]?.submit &&
    taskList.value.find(item => item.teacher_correct === -1)
  )
})

/**
 * 获取当前任务批改学生
 */
const getPracticeDetailInfo = async () => {
  const res = await getPracticeDetail({
    task_id: taskInfo.value.taskId,
    class_id: selectClass.value.classId,
    class_type: selectClass.value.class_type
  })
  const { submit_list, un_submit_list } = res.data
  studentList.value = [...submit_list.list, ...un_submit_list.list]

  curStudentIndex.value = studentList.value.length ? 0 : null
  getQuestionListInfo()
}

const getQuestion = param => {
  return QuestionParser.parse(getParseData(param), rbqOption)
}

watch(
  () => curStudentIndex.value,
  () => {
    getQuestionListInfo()
  },
  {
    deep: true
  }
)

watch(
  () => selectClass.value,
  () => {
    getPracticeDetailInfo()
  },
  {
    deep: true
  }
)

const initData = () => {
  taskInfo.value = {
    taskId: route.query?.taskId,
    name: route.query?.name,
    classList: JSON.parse(route.query?.classList)
  }
  if (route.query?.activeClassId) {
    selectClass.value = taskInfo.value.classList.find(
      item => item.classId == route.query?.activeClassId
    )
    return
  }
  selectClass.value = taskInfo.value.classList[0]
}
initData()
</script>

<style lang="less" scoped>
.correct-container {
  .content {
    margin-top: 20px;
    gap: 20px;
    align-items: self-start;
    height: calc(100vh - 170px);

    .content-left {
      height: 100%;
      background-color: #fff;
      padding: 20px;
      width: 420px;

      .left-title {
        width: 180px;
      }

      .student-info {
        border-radius: 10px 10px 0 0;
        background-image: url('@/assets/images/assignment/stu-correct-bg.png');
        height: 200px;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        gap: 10px;

        .avatar-img {
          width: 110px;
        }

        .name {
          font-weight: bold;
          font-size: 22px;
        }
      }

      .task-list {
        gap: 20px;
        margin-top: 20px;
        height: calc(100% - 200px - 140px);
        overflow-y: auto;

        .task-item {
          gap: 20px;
          padding: 20px;
          border-radius: 8px;
          background-color: #fafafa;
          line-height: 1.6;
          align-items: start;

          .correct-btn {
            margin-top: 4px;
          }
        }
      }

      .btn-list {
        gap: 20px;
        margin-top: 12px;

        .btn-item {
          flex: 1;
          color: #5466e7;
          background-color: rgb(247 249 255 / 1);
          height: 50px;
          border-radius: 8px;
        }

        .disabled:hover {
          cursor: not-allowed;
        }
      }
    }

    .content-right {
      height: 100%;
      background-color: #fff;
      padding: 20px;
      flex: 1;
      overflow: hidden;
      .task-line {
        gap: 20px;
        margin-bottom: 10px;

        .line-left {
          gap: 30px;

          .left-item {
            .text {
              color: rgb(84 102 231 / 1);
              font-size: 22px;
              font-weight: bold;
            }
          }
        }

        .border {
          width: 1px;
          height: 14px;
          margin-top: 2px;
          background-color: rgb(183 184 187 / 1);
        }
      }

      .question-list {
        height: calc(100% - 50px);
        overflow-y: auto;

        .question-info {
          margin: 30px 0 20px;
          overflow: hidden;
        }

        .question-stu {
          border-radius: 14px;
          background-color: #f7f9ff;
          padding: 20px;
          align-items: start;

          .stu-left {
            flex: 1;

            .title {
              font-weight: bold;
              color: #5466e7;
              margin-bottom: 20px;
            }
          }

          .stu-btn {
            padding: 10px;
            border-radius: 8px;
            background-color: #e9eeff;
            color: #5466e7;
            align-items: center;
            gap: 4px;

            .btn-img {
              width: 24px;
            }
          }
        }

        .question-an {
          border-radius: 14px;
          background-color: #f2fcf9;
          padding: 20px;
          margin-top: 20px;
          overflow: hidden;
        }

        .title {
          color: #0cc58d;
          font-weight: bold;
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
